<script setup>
import { ref, reactive } from 'vue'

const emit = defineEmits(['search'])

// 搜索表单
const searchForm = reactive({
  username: '',
  real_name: '',
  email: '',
  phone: '',
  status: '',
  role_code: ''  // 改用role_code字段与API匹配
})

// 角色选项
const roleOptions = [
  { value: '', label: '全部角色' },
  { value: 'ROLE_SUPER_ADMIN', label: '系统管理员' },
  { value: 'ROLE_BUSINESS_STAFF', label: '业务员' },
  { value: 'ROLE_OPERATOR', label: '操作员' },
  { value: 'ROLE_MANAGER', label: '负责人' },
  { value: 'ROLE_FINANCE', label: '财务员' }
]

// 状态选项
const statusOptions = [
  { value: '', label: '全部状态' },
  { value: '1', label: '正常' },
  { value: '0', label: '禁用' }
]

// 是否展开更多搜索条件
const expanded = ref(false)

// 搜索
const handleSearch = () => {
  // 过滤空值
  const filters = {}
  Object.entries(searchForm).forEach(([key, value]) => {
    if (value !== '') {
      filters[key] = value
    }
  })
  
  emit('search', filters)
}

// 回车键触发搜索
const handleKeyup = (e) => {
  if (e.key === 'Enter') {
    handleSearch()
  }
}

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  
  emit('search', {})
}

// 切换展开/收起
const toggleExpand = () => {
  expanded.value = !expanded.value
}
</script>

<template>
  <div class="search-bar">
    <el-form :model="searchForm" inline>
      <el-form-item label="用户名">
        <el-input 
          v-model="searchForm.username" 
          placeholder="用户名"
          clearable
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <el-form-item label="姓名">
        <el-input 
          v-model="searchForm.real_name" 
          placeholder="姓名"
          clearable
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <template v-if="expanded">
        <el-form-item label="电子邮箱">
          <el-input 
            v-model="searchForm.email" 
            placeholder="电子邮箱"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        
        <el-form-item label="手机号">
          <el-input 
            v-model="searchForm.phone" 
            placeholder="手机号"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
      </template>
      
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="全部状态" clearable>
          <el-option 
            v-for="item in statusOptions" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="角色">
        <el-select v-model="searchForm.role_code" placeholder="全部角色" clearable>
          <el-option 
            v-for="item in roleOptions" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleSearch">
          搜索
        </el-button>
        <el-button @click="resetSearch">
          重置
        </el-button>
        <el-button type="text" @click="toggleExpand">
          {{ expanded ? '收起' : '展开' }}
          <el-icon>
            <arrow-down v-if="!expanded" />
            <arrow-up v-else />
          </el-icon>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.search-bar {
  margin-bottom: 20px;
  background-color: var(--el-bg-color);
  border-radius: 4px;
  padding: 10px;
}
</style> 